<template>
  <div class="main">
    <section>
      <el-button style="margin-bottom:20px" type="primary" @click="addGoods">添加商品</el-button>
      <el-table border :data="list" style="width: 100%">
        <el-table-column prop="id" label="商品id">
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button type="danger" plain @click="deleteComfir(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageIndex"
        :page-sizes="[10, 20, 50, 100, 200]" :page-size="listQuery.pageSize" background layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>
    </section>
  </div>
</template>

<script>
import {
  bindTag,
  searchBindTag,
  unbindTag,
  deleteTag
} from '@/api/goodMiddleStage'

import mixins from '../mixins'
export default {
  name: 'brand',
  mixins: [mixins],
  components: {},

  data() {
    return {
      listQuery: {
        pageIndex: 0,
        pageSize: 20,
        queryType: 3
      }
    }
  },
  created() {
    this.init()
    this.getList()
  },
  methods: {
    init() {
      this.tagId = this.$route.query.id
      this.getList()
    },
    async getList() {
      try {
        const { data } = await searchBindTag({ tagId: this.tagId })
        this.list = data.data
        this.listTotal = data.total
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    // 添加商品
    addGoods() {
      let selected = this.list.map(i => {
        return {
          goodsId: i.goodsId,
          name: i.goodsName
        }
      })
      this.gmsGoodsChoose({}, selected).then(val => {
        let arrs = []
        val.forEach(it => {
          arrs.push(it.goodsId)
        })
        let req = {
          goodsIds: arrs,
          tagId: this.tagId
        }
        this.bindTags(req)
      })
    },
    // 绑定商品标签
    async bindTags(val) {
      try {
        const { data } = await bindTag(val)
        this.$message.success('操作成功')
        this.getList()
      } catch (error) {
        this.$message.error('操作失败')
        console.log(error)
      }
    },
    async deleteComfir(val) {
      try {
        await this.$confirm('是否删除当前标签商品', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this._unbindTag(val)
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    async _unbindTag(val) {
      try {
        const { data, message } = await unbindTag({
          goodsId: val.goodsId,
          tagId: val.tagId
        })
        if (message === 'SUCCESS') {
          this.$message.success('操作成功')
          this.getList()
        }
      } catch (error) {
        this.$message.success('操作失败')
        console.log(error)
      }
    }
  }
}
</script>

<style>
</style>